<template>
  <ScrollArea :bot-margin="50">
    <table style="width: 100%">
      <thead>
        <q-card-actions align="right">
          <q-btn
            label="Assign"
            class="yellow-btn"
            @click="openAssignDialog()"
          />
          <!--  <q-btn label="Create" class="grey-btn" @click="openCreateDialog()" /> -->
        </q-card-actions>
        <tr class="row">
          <th class="col-2 fal list-header">Stock Code</th>
          <th class="col-2 fal list-header">Task</th>
          <th class="col-2 fal list-header">E-form</th>
          <th class="col-2 fal list-header">M'tce Type</th>
          <th class="col-2 fal list-header">Class</th>
          <th class="col-2 fal list-header">Action</th>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="(item, index) in filterRows"
          :key="index"
          class="cursor-pointer row list-item"
          style="text-align: left"
          @dblclick="dblclickFn(item)"
        >
          <td class="col-2 fal">{{ item.stock_item.stock_code }}</td>
          <td class="col-2 fal">{{ item.name }}</td>

          <td class="col-2 fal">
            <q-btn
              v-if="item.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(item.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </td>
          <td class="col-2 fal">{{ item.mtce_type }}</td>
          <td class="col-2 fal">
            <div>
              <q-chip square v-if="item.cur_tab">
                {{ item.cur_tab ? 'Task' : '' }}
              </q-chip>
              <q-chip square v-if="item.final_tab">
                {{ item.final_tab ? 'Final Check' : '' }}
              </q-chip>
            </div>
          </td>

          <td class="col-2 fal">
            <q-btn
              dense
              round
              flat
              class="edit-btn"
              icon="edit"
              @click.stop="openEditDialog(item)"
            ></q-btn>
            <q-btn
              dense
              round
              flat
              class="del-btn"
              @click.stop="openDeleteDialog(item)"
              icon="delete"
            ></q-btn>
          </td>
        </tr>
      </tbody>
    </table>
  </ScrollArea>

  <q-dialog persistent v-model="assignTask">
    <AssignTask
      :style="'assign'"
      :stock_id="props.stock_id"
      @close="closeDialog"
      @update="getStockItemTasksData()"
    />
  </q-dialog>

  <q-dialog persistent v-model="editDialogVisible">
    <AssignTask
      :style="'edit'"
      :taskItem="editedRow"
      :stock_id="editedRow.stock_id"
      @close="closeDialog"
      @update="getStockItemTasksData()"
    />
  </q-dialog>

  <q-dialog persistent v-model="deleteDialogVisible">
    <q-card>
      <MyDialog
        title="Delete"
        :content="`Ready to delete task: ${editedRow.name} `"
      >
      </MyDialog>

      <q-card-actions align="right">
        <q-btn class="close-btn" flat label="Cancel" v-close-popup />
        <q-btn class="delete-btn" flat label="Delete" @click="deleteFn" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import AssignTask from 'src/components/itemMaster/AssignTask.vue';
import {
  deleteStockItemTask,
  getStockItemTasks,
} from 'src/services/stockItemtasksService';
import { useQuasar } from 'quasar';
import { StockItemTask } from 'src/services/type';
import { resolveDjangoUrl } from 'src/boot/axios';
import ScrollArea from 'src/components/ScrollArea.vue';
import eformIcon from 'src/assets/style/Icon.png';
import MyDialog from '../container/MyDialog.vue';

const task = ref('');
const description = ref('');

const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);

const $q = useQuasar();

const props = defineProps<{
  stock_id: number;
  stock_code: string;
}>();

let selected_delete_item = 0;

const rows = ref();
const createNewTask = ref(false);
const assignTask = ref(false);
const filterRows = computed(() => {
  return rows.value;
});

async function getStockItemTasksData() {
  const res = await getStockItemTasks(props.stock_code);
  if (res.data) {
    rows.value = res.data.data;
  }
}

function openEditDialog(row: StockItemTask) {
  editedRow.value = { ...row };
  editDialogVisible.value = true;
}

function dblclickFn(row: StockItemTask) {
  console.log(row);

  editedRow.value = { ...row };
  editDialogVisible.value = true;
}

function openDeleteDialog(row: StockItemTask) {
  console.log('delte', row);
  editedRow.value = { ...row };
  selected_delete_item = row.id;

  deleteDialogVisible.value = true;
}

function openAssignDialog() {
  assignTask.value = true;
}

function closeDialog() {
  createNewTask.value = false;
  assignTask.value = false;
  editDialogVisible.value = false;
}

function goEformWebsite(eform_schema_id: number) {
  const url = `${resolveDjangoUrl()}/eforms/eformPreview/${eform_schema_id}`;
  window.open(url);
}

function deleteFn() {
  deleteStockItemTask(selected_delete_item)
    .then((res) => {
      if (res) {
        $q.notify({
          type: 'positive',
          message: 'Delete successfully',
        });
        getStockItemTasksData();
      }
    })
    .finally(() => {
      deleteDialogVisible.value = false;
    });
}

getStockItemTasksData();
</script>

<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}
table thead tr th {
  border-bottom: 1px solid #d9d9d9;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
td {
  padding: 0.5rem;
}

table thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>
